<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
    <link href="01-css_grammar.css" rel="stylesheet" type="text/css">
	<title>css项目</title>
   
</head>

<!--1.内联样式）Inline style > 
	2.（内部样式）Internal style sheet >
	3.（外部样式）External style sheet > 
	4.浏览器默认样式 -->
<!-- 
 1. 内联样式表的权值最高 1000；
 2. ID 选择器的权值为 100
 3. Class 类选择器的权值为 10
 4. HTML 标签选择器的权值为 1
  -->
<body id="body">
	<h1 id="h01">这是是一个标题</h1>
	<p class="p01">这是一个段落01</p>
	<p class="p02">这是一个段落02</p>



	<!----------------------------- 1.文本样式------------------------------------->
	<div id = "div_01">
		<h1 class="title_01">1.文本样式 实例</h1>
		<p class="date_01">2018年 7月 23日</p>
		<p class="content_01">“当我年轻的时候，我梦想改变这个世界；当我成熟以后，我发现我不能够改变这个世界，我将目光缩短了些，决定只改变我的国家；当我进入暮年以后，我发现我不能够改变我们的国家，我的最后愿望仅仅是改变一下我的家庭，但是，这也不可能。当我现在躺在床上，行将就木时，我突然意识到：如果一开始我仅仅去改变我自己，然后，我可能改变我的家庭；在家人的帮助和鼓励下，我可能为国家做一些事情；然后，谁知道呢?我甚至可能改变这个世界。”</p>
		<p><a class="link_one" href="01-css_grammar.css" target="_blank">这是第一个链接</a></p>
		<p><a class="link_two" href="01-css_grammar.css" target="_blank">这是第二个链接</a></p>
		
		<p><b>注意：</b>重置浏览器窗口大小查看 "justify" 是如何工作的。</p>

	</div>

	<!----------------------------- 2.列表样式------------------------------------->
	<div class = "div_02">
		
		<h1 class="title_02">2.列表样式</h1>
		<ol  class="div_ol_02">
			<li>有序列表1</li>
			<li>有序列表2</li>
			<li>有序列表3</li>
		</ol>

		<ul class="div_ul_02">
			<li>无序列表1</li>
			<li>无序列表2</li>
			<li>无序列表3</li>

		</ul>
         

	</div>

	<!----------------------------- 3.表格样式------------------------------------->
	<div class = "div_03">
		
		<h1 class="title_03">3.表格样式Table</h1>
		<table class="table_01">
			<tr class="first_one">
				<th>姓名</th>
				<th>年龄</th>
				<th>公司</th>
			</tr>

			<tr>
				<th>刘子彬0</th>
				<th>28</th>
				<th>重庆替比网络科技公司</th>
			</tr class = "alt">

			<tr>
				<th>刘子彬1</th>
				<th>28</th>
				<th>重庆替比网络科技公司</th>
			</tr>

			<tr class="alt">
				<th>刘子彬2</th>
				<th>28</th>
				<th>重庆替比网络科技公司</th>
			</tr>

		</table>   
	</div>

	<!----------------------------- 4.盒子模型------------------------------------->
	<div id="div_04">
		<h1 class="title_04">4.盒子模型</h1>
		<img class="hezimodel_img" src="../Resource/Snip20180725_56.png" >		
        <p>最终元素的总宽度计算公式是这样的：</p>
        <p>总元素的宽度=宽度+左填充+右填充+左边框+右边框+左边距+右边距</p>
        <p>元素的总高度最终计算公式是这样的：</p>
        <p>总元素的高度=高度+顶部填充+底部填充+上边框+下边框+上边距+下边距</p>

        <p class="lunkuo01">这是设置一个轮廓的段落</p>

        <p class="margin01">这是设置一个margin的段落</p>

        <p class="padding01">这是设置一个padding的段落</p>

        <p class="display01">测试块级元素1</p>
        <p class="display01">测试块级元素2</p>
        <p class="display01">测试块级元素3</p>

        <p class="position_relative_01">定位点的应用</p>
        
        <p class="position_sticky_01">我是粘性定位</p>

	</div>

    <!----------------------------- 5.Float浮动------------------------------------->
	<div id = "div_05">
		<h1 class="title_05">5.Float浮动</h1>
        <p> 
        	<img  class="div_05_image_01" src="../Resource/base_test_love.png" style="width: 80px; height: 80px">
        	这是一些文本。这是一些文本。这是一些文本。
			这是一些文本。这是一些文本。这是一些文本。
			这是一些文本。这是一些文本。这是一些文本。
			这是一些文本。这是一些文本。这是一些文本。
			这是一些文本。这是一些文本。这是一些文本。
			这是一些文本。这是一些文本。这是一些文本。
		</p>

		<br>

		<img  class="div_05_image_02" src="../Resource/base_test_love.png" style="width: 80px; height: 80px">
		<img  class="div_05_image_02" src="../Resource/base_test_love.png" style="width: 80px; height: 80px">
		<img  class="div_05_image_02" src="../Resource/base_test_love.png" style="width: 80px; height: 80px">
		<img  class="div_05_image_02" src="../Resource/base_test_love.png" style="width: 80px; height: 80px">
		<img  class="div_05_image_02" src="../Resource/base_test_love.png" style="width: 80px; height: 80px">
		<img  class="div_05_image_02" src="../Resource/base_test_love.png" style="width: 80px; height: 80px">
		<img  class="div_05_image_02" src="../Resource/base_test_love.png" style="width: 80px; height: 80px">
		<img  class="div_05_image_02" src="../Resource/base_test_love.png" style="width: 80px; height: 80px">
  
	</div>

	<!----------------------------- 6.居中对齐------------------------------------->
    <div id = "div_06">
     	<h1 class = "title_06">6.居中对齐</h1>
     	<p  class = "div_06_center_01">6.1元素水平居中</p>
     	<p  class = "div_06_center_02">6.2文字水平居中</p>
     	<p  style="text-align: center;">要让图片居中对齐, 可以使用 margin: auto; 并将它放到块元素中：</p>
     	<img class="div_06_center_03" src="../Resource/Snip20180725_56.png" style="width: 50%; height = 100px;">
     	<p class = "div_06_center_04">6.3垂直居中对齐 - 使用 padding</p>
     	<br>
     	<p class = "div_06_center_05">6.4垂直居中 - 使用 line-height</p>
     	<br>
     	<p class = "div_06_center_06">6.5垂直居中 - 使用 position 和 transform</p>
    </div>

    <!----------------------------- 7.伪类Pseudo-classes------------------------------------->
    <br>
    <br>
    <div class="div_07">
    	<h1 class="title_07">7.伪类Pseudo-classes</h1>
    	<h2>CSS伪类是用来添加ii一些选择器的特殊效果</h2>
    	<h2 style="text-align: center;">伪类的格式
    	selector.class:pseudo-class {property:value;}</h2>
    	<a class="div_07_a_01" href="http://www.baidu.com">百度一下伪类</a>
    	
    	<p class="div_07_p_01">I am a <i>strong</i> man. I am a <i>strong</i> man.</p>
        <p class="div_07_p_01">I am a <i>strong</i> man. I am a <i>strong</i> man.</p>

        <p class="div_07_p_02">伪元素用于向文本的首字母设置特殊样式</p>
        
        <p class="div_07_p_03">":after" 伪元素可以在元素的内容之后插入新内容</p>
    </div>

</body>
</html>